import React from 'react';
import { Button, Row, Col, Tooltip } from 'antd';
import CommonListsIndex from '../../../../components/CommonLists/index';
import FilterTool from '../../../../components/FilterTool';
import services from '../../../../services/api';
import InterfaceManageList from './list';

class InterfaceManage extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.state = {
      dataSourceTypeOptions: [],
    };
    this.listsComponent = InterfaceManageList;
    this.addComponent = '/dataGateway/interfaceManage/add';
    this.api = 'interfaceManage';
    this.defaultParams = { dataSourceType: 0 };
    this.queryParams = { ...this.defaultParams };
    this.initQueryPanigation = {
      page: 1,
      size: 10,
    };
    this.queryPanigation = this.initQueryPanigation;
  }

  componentDidMount() {
    this.getDataSourceType();
  }

  // 获取数据源类型
  getDataSourceType = async () => {
    const { data: dataSourceTypeOptions, code } = await services.dataSourceType.list('_i');
    if (!code) {
      this.setState({
        dataSourceTypeOptions,
      });
    }
  };

  getColumns = () => [
    {
      title: '接口名称',
      dataIndex: 'name',
      render: (text) => (
        <Tooltip title={text} placement='topLeft'>
          <div className='overflowtext'>{text}</div>
        </Tooltip>
      ),
    },
    {
      title: '数据源名称',
      dataIndex: 'thirdList[0].thirdInterfaceName',
    },
    {
      title: (
        <>
          {this.getFilterTitle('接口分组', this.state.dataSourceTypeOptions, 'groupId', this.refreshTableFilter, [
            'code',
            'name',
          ])}
        </>
      ),
      dataIndex: 'groupIdLabel',
    },
    {
      title: (
        <>
          {this.getFilterTitle(
            '状态',
            [
              {
                value: 1,
                name: '发布',
              },
              {
                value: 0,
                name: '停用',
              },
            ],
            'status',
            this.refreshTableFilter,
            ['value', 'name']
          )}
        </>
      ),
      dataIndex: 'statusLabel',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      render: (text) => (
        <Tooltip title={text} placement='topLeft'>
          <div className='overflowtext'>{text}</div>
        </Tooltip>
      ),
    },
    {
      title: '更新时间',
      dataIndex: 'modifyTime',
      render: (text) => (
        <Tooltip title={text} placement='topLeft'>
          <div className='overflowtext'>{text}</div>
        </Tooltip>
      ),
    },
  ];

  onChangePagination = (pageNumber, type = 'current_page') => {
    const t = type === 'current_page' ? 'page' : 'size'
    this.updatePanagaition && this.updatePanagaition({
      [t]: pageNumber,
    });
    this.freshQueryList();
  };

  refreshFilter = (params, type) => {
    this.queryParams = { ...params, ...this.defaultParams };
    if (type === false) return
    this.freshQueryList();
  };

  // 重置筛选项
  resetList = () => {
    this.queryTableParams = {};
    this.queryPanigation = { ...this.initQueryPanigation };
  };

  render() {
    const { records, current, total, size } = this.state;
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'search',
        key: 'name',
        name: 'name',
        defaultValue: '',
        placeholder: '请输入接口名称进行搜索',
      },
    ];
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={6}>
            <Button type='primary' onClick={this.add}>
              新建
            </Button>
          </Col>
          <Col span={18}>
            <FilterTool
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
              justify='end'
              refresh={this.resetList}
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.props}
            list={records}
            currentPage={current}
            totalCount={total}
            pageSize={size}
            edit={this.edit}
            rowKey='id'
            columns={this.getColumns()}
            queryList={this.freshQueryList}
            refreshTableFilter={this.refreshTableFilter}
            onChangePagination={this.onChangePagination}
          />
        </div>
      </div>
    );
  }
}

export default InterfaceManage;
